
import { Modal } from "antd";
import React, { useEffect, useImperativeHandle, useState } from "react";
import { FullscreenOutlined } from "@ant-design/icons"
import XxtvCard from "../card/xxtv-card";
import JxDetail from "../../component/jxlbDetail/jxlbDetail";
import http from "@/utils/request";
import { queryDealerInfoToPageAPI } from "@/api/api";
import XVtable from "@/antd/table/table";
import DealerInfomationView from "@/component/jx-detail/dealer-infomation";
function JxListComponent({ onRef, prentParams }) {
    const [loading, setLoading] = useState(false);
    const [state, setState] = useState({
        totalCount: 0,
        list: []
    })
    const [params, setParams] = useState({
        pageSize: 20,
        pageIndex: 1
    })


    // 获取经销商列表
    const getList = () => {

        http.post({
            url: queryDealerInfoToPageAPI,
            params: {
                ...params,
            },
            before: () => setLoading(true),
            success: res => {
                const { list = [], totalCount = 0 } = res?.data;
                setState({
                    totalCount,
                    list: list.map((item, index) => {
                        return {
                            rowno: index + 1,
                            ...item
                        }
                    })
                })
            },
            failure: msg => { },
            complete: () => setLoading(false),
        })
    }

    useEffect(() => {
        getList();
    }, [params])

    useImperativeHandle(onRef, () => ({
        params,
        setParams: (object) => {
            setParams(object)
        }
    }))


    // 拼接参数字符串
    const setUrlParams = (str, object) => {
        let url = "";

        for (let key in object) {
            let tempStr = `&${key}=${object[key]}`;
            url = url + tempStr
        }
        // console.log("转码：", (str + url))
        return (str + url);
    }
    // 跳转到一个经销商的页面
    const openNew = (item) => {
        console.log("要跳转的item", item);
        console.log("父级查询条件：", prentParams);
        var urlObject = {
            startTime: prentParams.startTime || "",
            endTime: prentParams.endTime || "",
            insuredCode: item.insuredCode,//点击跳转时的的经销商代码
            insuredName: encodeURI((item.insuredName)), //点击跳转时的经销商名称
            factoryCode: encodeURI((prentParams.factoryCode).join(",")),
            factoryName: encodeURI((prentParams.factoryName).join(",")),
            insuredBrand: encodeURI(prentParams.insuredBrand),
            insuredBrandName: encodeURI(prentParams.insuredBrandName),
            insuredGroup: encodeURI(prentParams.insuredGroup),//集团代码
            insuredGroupName: encodeURI(prentParams.insuredGroupName),//集团名称
            secComCode: encodeURI(prentParams.secComCode),//二级机构代码
            secComName: encodeURI(prentParams.secComName),//二级机构名称
            salesTeam: encodeURI(prentParams.salesTeam),//团队代码
            salesTeamName: encodeURI(prentParams.salesTeamName),//团队名称
            salesName: encodeURI(prentParams.salesName),//业务经理
            businManagerName: encodeURI(prentParams.businManagerName),//业务经理
            useNatureCode: encodeURI(prentParams.useNatureCode),//业务经理
            useNatureName: encodeURI(prentParams.useNatureName),//业务经理
            serviceNature: encodeURI(prentParams.serviceNature),//营运性质代码
            serviceNatureName: encodeURI(prentParams.serviceNatureName),
            fuelType: encodeURI(prentParams.fuelType),//业务经理
            fuelTypeName: encodeURI(prentParams.fuelTypeName),//能源
            seriesCode: encodeURI(prentParams.seriesCode),
            seriesName: encodeURI(prentParams.seriesName),
            subsidyFlag: prentParams.subsidyFlag,
            //     city: JSON.stringify(form.getFieldValue('city')),//行政区代码
        }

        console.log("组装跳转参数：", urlObject);

        var urlstr = setUrlParams("?", urlObject);
        window.open(encodeURI(urlstr))


    }




    const [visible, setVisible] = useState(false);


    const HeaderElement = () => {
        return (
            <>
                <span className="icon"></span>
                <span className="text" onClick={() => setVisible(true)} style={{ cursor: 'pointer' }}>
                    <FullscreenOutlined />
                </span>
            </>
        )
    }

    const columns = [
        {
            title: "序号",
            dataIndex: 'rowno',
            key: 'rowno',
            width: "20%"
        },
        {
            title: '主机厂店代码',
            dataIndex: 'insuredCode',
            key: 'insuredCode',
            width: "30%"
        },
        {
            title: '店名',
            dataIndex: 'insuredName',
            key: 'insuredName',
            width: "50%"
        },
    ]

    // 切换分页
    const onChange = (value, options) => {
        setParams({
            ...params,
            pageSize: 20,
            pageIndex: value
        })
    }

    const [showList, setShowList] = useState(true);

    useEffect(() => {
        console.log("数据长度：", state.list.length);
        if (state.list.length === 1) {
            setShowList(false)
        } else {
            setShowList(true)
        }
    }, [state])
    return (
        <>
            <Modal
                title="车商列表"
                centered
                open={visible}
                onCancel={() => setVisible(false)}
                footer={[
                ]}
                width={1400}


            >
                <JxDetail
                    list={state.list}
                    loading={loading}
                    current={params.pageIndex}
                    total={state.totalCount}
                    defaultPageSize={params.pageSize}
                    onChange={onChange}
                />

            </Modal>
            {
                showList ? <XxtvCard
                    title="车商列表"
                    ActionElement={<HeaderElement />}

                >
                    <XVtable
                        onClick={openNew}
                        loading={loading}
                        columns={columns}
                        dataSource={state.list}
                        pagination={{
                            onChange: onChange,
                            total: state.totalCount,
                            defaultPageSize: params.pageSize,
                            defaultCurrent: params.pageIndex,
                            current: params.pageIndex,
                        }}
                    />

                </XxtvCard>
                    :
                    <DealerInfomationView
                        state={state} />
            }


        </>
    )
}
export default JxListComponent